<template>
  <div>
    <!-- news.html 12-40 -->
    <!--面包屑导航-->
    <div class="breadcrumb">
      <div class="container">
        <h2><a href="">首页</a>&gt;<a href="">公司动态</a></h2>
      </div>
    </div>
    <!--页面主体-->
    <div class="main container" v-if="data">
      <div class="news">
        <ul>
          <li v-for="(item, index) in data.data" :key="index">
            <!-- 过滤器: 把数据进行转换 -->
            <span>{{ item.pubTime | date }}</span>
            <router-link :to="`/news_details/${item.nid}`">
              {{ item.title }}
            </router-link>
          </li>
          <!--<li><span>2016-02-21</span><a href="">净美仕新风净化系统　助力校园新风行动</a></li>-->
          <!--<li><span>2016-02-21</span><a href="">全国新风行动全面启动 助推净美仕战略升级</a></li>-->
          <!--<li><span>2016-02-21</span><a href="">智能空气净化器翻盘：净美仕能否领衔?</a></li>-->
        </ul>
      </div>
      <!-- 分页导航-->
      <div class="pages">
        <a
          @click="getData(data.pageNum - 1)"
          :class="{ default: data.pageNum == 1 }"
          >上一页</a
        >
        <!-- 动态class   :class="{ 名: true/false }" -->
        <a
          @click="getData(item)"
          v-for="(item, index) in data.pageCount"
          :key="index"
          :class="{ cur: item == data.pageNum }"
        >
          {{ item }}
        </a>
        <!-- <a href="">2</a> -->
        <!--<a href="">3</a>-->
        <!--<a href="">4</a>-->
        <!--<a href="">5</a>-->
        <a
          @click="getData(data.pageNum + 1)"
          :class="{ default: data.pageNum == data.pageCount }"
          >下一页</a
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    getData(pno) {
      //判断 pno 超出限定, 则终止后续代码
      if (this.data && pno > this.data.pageCount) return
      if (pno < 1) return

      // 需要传递页数参数, 参数pageNum 是服务器规定的
      let url = 'news_select.php?pageNum=' + pno

      this.axios.get(url).then(res => {
        console.log(res)
        this.data = res.data
      })
    },
  },
  // vfilter
  filters: {
    date(value) {
      // *1: 转数字类型 才会当做时间戳
      let date = new Date(value * 1)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      return `${year}-${month}-${day}`
    },
  },
}
</script>

<style lang="scss" scoped></style>
